<template>
    <div class='InboundList-box'>
       <!-- 自主活动详情 -->
        <div class="first">
           <h3>自主活动详情</h3>
           <p v-show="activityStatus===0" class="first-p">申请中</p>
           <p v-show="activityStatus===1 || activityStatus===7" class="first-p">未开始</p>
           <p v-show="activityStatus===2" class="first-p">报名中</p>
           <p v-show="activityStatus===3" class="first-p">进行中</p>
           <p v-show="activityStatus===4" class="first-p">已结束</p>
           <p v-show="activityStatus===6" class="first-p">已拒绝</p>
           <p v-show="activityStatus===8 || activityStatus===9" class="first-p">已暂停</p>
        </div>
        <div class="second">
           <el-form :model="form" label-position="top" ref="userRef" label-width="80px">
            <div class="formItembox">
                  <el-form-item class="formItem" label="活动名称" prop="title">
                     <el-input disabled v-model="form.title" placeholder="" />
                  </el-form-item>
                  <el-form-item class="formItem" label="报名开始时间" prop="signupStart">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.signupStart"
                         type="datetime"
                         placeholder=""
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="报名截止时间" prop="signupEnd">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.signupEnd"
                         type="datetime"
                         placeholder=""
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动开始时间" prop="activityStart">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.activityStart"
                         type="datetime"
                         placeholder=""
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动结束时间" prop="activityEnd">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.activityEnd"
                         type="datetime"
                         placeholder=""
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动地点" prop="address">
                     <el-input disabled v-model="form.address" placeholder="" />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动范围" prop="activityScopeList">
                     <!-- 活动范围 -->
                     <el-input disabled v-model="form.activityScopeList" placeholder="" />
                  </el-form-item>
                  <el-form-item class="formItem" label="得分标准" prop="scoreType">
                     <el-select disabled v-model="form.scoreType" placeholder="">
                        <el-option label="参与得分" value="1">参与得分</el-option>
                        <el-option label="指标评分" value="2">指标评分</el-option>
                        <el-option label="区间得分" value="3">区间得分</el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item class="formItem" label="活动类型" prop="activityCategoryId">
                     <el-select disabled v-model="form.activityCategoryId" placeholder="">
                        <el-option
                           v-for="item in activityTypes"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
                   <el-form-item class="formItem" label="状态">
                      <el-radio-group disabled v-model="form.isOpen">
                         <el-radio label="0" value="0">开启</el-radio>
                         <el-radio label="1" value="1">关闭</el-radio>
                      </el-radio-group>
                   </el-form-item>          
                  <el-form-item class="formItem" label="活动内容">
                     <el-input disabled v-model="form.content" type="textarea" placeholder=""></el-input>
                  </el-form-item>
            </div>
         </el-form>
        </div>
        <div class="three">
           <h3 class="mb16">报名信息</h3>
           <!-- 搜索栏 -->
           <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
           <!-- 自主活动详情列表页面 -->
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="total"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      :activityStatus="activityStatus"
      :pagination="inventoryTableData.length>0"
    >
    </forTableCom>
    </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs,onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {activityDetail,activityDetail2,activityScoring,activityDelete,activityPassAll} from '@/api/activityClassify/activityList.js'
import {getdeptApi} from '@/api/system/notice.js'
import {listUser} from '@/api/activityClassify/activityClassifyType.js'
import { checkPermi } from '@/utils/permission.js'
import serchForm from '@/components/inventory/serchForm.vue'
import forTableCom from '@/components/forTableCom/index.vue'
import { ElMessage,ElMessageBox } from 'element-plus'

const router = useRouter();
const route = useRoute();
const data = reactive({});

const id = route.params.id // 动态路由传过来的值用params接收
// 表单
let inventoryForm = ref({
  nickName:'',//学生姓名
  userName: '', // 学号
  deptId: '', // 组织
})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'nickName',
    label: '学生姓名',
  },
  {
    name: 'userName',
    label: '学号',
  },
  {
    name: 'deptId',
    label: '组织',
    type:'weixiao'
  },
])
// 查找
const onSearch = (v) => {
  console.log(v,'查看入库页面时间参数')
  // 每次查询后回到页1
  pageNum.value = 1
  getDetail2(v)
}
const form = ref({
     title:'', //活动名称
     signupStart:'', //报名开始时间
     signupEnd:'', //报名截止时间
     activityStart:'', //活动开始时间
     activityEnd:'', //活动结束时间
     address:'', //活动地点
     activityScopeList:'', //活动范围
     scoreType:'', //得分标准
     activityCategoryId:'', //活动类型
     coverImageUrl:'',      //活动封面
     attachment:'',
     content:'',     //活动内容
     type:2,       //区分教师和学生
     isOpen:'0'    //状态
  })

let idActive = 'id'
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
const piliangIds = ref('')
let ids = []
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v.map(item => item.id);        //过滤id
    ids = Array.from(multipleSelection.value)              //批量通过/拒绝用的
    piliangIds.value = multipleSelection.value.join(',')   //批量删除用的
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  // let params = inventoryForm.value
  // listUser(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v)
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v)
}
// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'userName',
    label: '学号',
  },
  {
    prop: 'nickName',
    label: '学生姓名',
  },
  {
    prop: 'deptNameList',
    label: '所属组织',
  },
  {
    prop: 'applyTime',
    label: '报名时间',
    applyTimeActivityShow:true
  },
  {
    prop: 'score',
    label: '获得积分',
    scoreActivityShow:true
  },
  {
    prop: 'status',
    label: '状态',
    statusDeatailActivityShow:true
  },
])
// 表格数据内容
let inventoryTableData = ref([])

let rejectId = ref(-1)

const sourceIdcopy = ref(-1)


const activityStatus = ref('')
const getDetail = ()=>{  //获取详情数据
    activityDetail(id).then(res=>{
      console.log(res,'打印详情数据');
      
        if(res.code===200){
             form.value.title = res.data.title
             form.value.signupStart = res.data.signupStart
             form.value.signupEnd = res.data.signupEnd
             form.value.activityStart = res.data.activityStart
             form.value.activityEnd = res.data.activityEnd
             form.value.address = res.data.address
             form.value.scoreType = String(res.data.scoreType)
             form.value.activityCategoryId = res.data.activityCategoryId
             form.value.content = res.data.content
             form.value.activityScopeList = res.data.activityScopeNameList.join(' / ')
             activityStatus.value = res.data.status
             form.value.isOpen = String(res.data.isOpen)
        }
    })
}

let activityStatus2 = ref('')
const getDetail2 = (data = '')=>{  //获取详情页面里面的列表数据
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    activityId:id,
  }
  let params = Object.assign(data, page)
    activityDetail2(params).then(res=>{
        if(res.code===200){
             inventoryTableData.value = res.rows
            //  activityStatus2.value = res.rows.status
             
             total.value = res.total
        }
    })
}
// 获取活动范围下拉信息
const genderOptions = ref([])
const getdeptApiFn = async () => {
  let page = {
    pageNum: 1,
    pageSize: -1,
  }
  let {code, data} = await getdeptApi(page)
  if (code === 200) {
    genderOptions.value = data
  }
}
// 获取活动类型下拉信息
const activityTypes = ref([])
const listUserFn = async () => {
  let page = {
    pageNum: 1,
    pageSize: -1,
  }
  let {code, rows} = await listUser(page)
  if (code === 200) {
    activityTypes.value = rows
    let rowList = []
  rows.forEach((v) => {
    rowList.push({
      value: v.id,
      label: v.name,
    })
  })
  activityTypes.value = rowList
  }
}
onMounted(()=>{
    Promise.all([getDetail(),getDetail2(),getdeptApiFn(),listUserFn()])
})
</script>

<style lang='scss' scoped>
.InboundList-box {
    padding: 16px;
    .first {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .first-p{
       background-color: #ccc;
       margin-left: 10px;
    }
  }
}
.formItembox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // justify-content: center;
      box-sizing: border-box;

      .formItem {
        width: 30%;
        margin-right: 50px;
      }
      .formItem:last-child {
        width: 100%;
        margin-right:0;
      }
      .formItem:nth-child(3) {
        margin-right:0;
      }
      .formItem:nth-child(6) {
        margin-right:0;
      }
      .formItem:nth-child(9) {
        margin-right:0;
      }
    }
:deep(.el-select .el-input__wrapper) {  //下拉框
  width: 280px;
}
:deep(.el-date-editor){  //日期选择器
   width: 280px;
}
.formItem :deep(.el-input) {  //input输入框
  width: 280px;
}
:deep(.el-textarea__inner){   //文本域
    height: 80px;
}
</style>
